<%--
  Created by IntelliJ IDEA.
  User: 恒少
  Date: 2021/3/9
  Time: 9:52
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>生成购书订单</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <script src="layui/layui.js"></script>
</head>
<body>

<%--&lt;%&ndash;搜索框（模糊查询/查询全部）&ndash;%&gt;--%>
<%--<div class="demoTable">--%>
    <%--<div class="layui-inline">--%>
        <%--<input class="layui-input" placeholder="请输入书名" name="id" id="demoReload" autocomplete="off">--%>
    <%--</div>--%>
    <%--<button class="layui-btn" data-type="reload">搜索</button>--%>
<%--</div>--%>



<table class="layui-hide" id="test" lay-filter="test"></table>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add">新增书籍</button>
    </div>
</script>

</body>
<script>
    layui.use(['table','jquery','form','layer'], function () {
        var table = layui.table;
        var $ = layui.jquery;
        var form = layui.form;
        var layer = layui.layer;
        $(function () {
            showTable();
        });
        function showTable(){
            table.render({
                elem: '#test'
                , url: '${pageContext.request.contextPath}/book/query'
                , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
                , defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                    title: '提示'
                    , layEvent: 'LAYTABLE_TIPS'
                    , icon: 'layui-icon-tips'
                }]
                , title: '用户数据表'
                , cols: [[
                    {type: 'checkbox', fixed: 'left'}
                    , {field: 'bookid', title: '书ID', fixed: 'left', unresize: true, sort: true}
                    , {field: 'bookname', title: '书名', edit: 'text'}
                    , {field: 'author', title: '作者', edit: 'text', sort: true}
                    , {field: 'count', title: '数量'}
                    , {field: 'type', title: '类别'}
                    , {field: 'press', title: '出版社', sort: true}
                ]]
                ,id:'testReload'
                , page: true
                , limit: 10
                , limits: [10, 15, 20]
            });
        }
        //头工具栏事件
        table.on('toolbar(test)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'add':
                    var data = checkState.data;
                    layer.alert(JSON.stringify(data));
                    break;
            };
        });


    });
</script>


</html>
